import React from 'react';
import { WriterWapper, 
        WriterWapperTwo,
        WriterItem,
        WriterBotton,
        PopoverWapper,
        ImgPhoto} from '../style'
import { connect } from 'react-redux'
import { actionCreators } from '../store';
 class Writer extends React.PureComponent{
    render(){
        return(
            <div>
            <WriterWapper
             onMouseMove={this.props.showPopover}
             onMouseOut={this.props.hidePopover} >
            {this.popover()}
                <img className="qrcode" src="https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png" alt=""></img>
                <div className="info">
                        <div className="title">下载简书手机App</div>
                        <div className="descriotion">随时随地发现和创作内容</div>
                </div>
            </WriterWapper>
            <WriterWapperTwo>
                <span>推荐作者</span>
                <a className="change" href="/">换一换</a>
                {this.props.writer.map((item)=>{
                    return(
                                <WriterItem key={item.get('id')}>
                                        <img className="namePhoto" src={item.get('imgUrl')} alt=""></img>
                                        <a className="name" href="/">{item.get('name')}</a>
                                        <p className="writer" >{item.get('writer')}</p>
                                        <span className="attention">关注</span>
                                </WriterItem>
                            
                             )
                })}
                <WriterBotton>
                    查看全部
                </WriterBotton>
            </WriterWapperTwo>
            </div>
        )
    }
    popover(){
        if(this.props.popover){
            return(
            <PopoverWapper>
                <ImgPhoto>
                     <img src='https://cdn2.jianshu.io/assets/web/download-index-side-qrcode-cb13fc9106a478795f8d10f9f632fccf.png' alt=''></img>
                </ImgPhoto>
            </PopoverWapper>
            )
        }else{
            return null
        }
    }
}
const mapstart=(start)=>({
    writer:start.getIn(["home",'Writer']),
    popover:start.getIn(['home','popover'])
})

const mapdispatch=(dispatch)=>({
    showPopover(){
        dispatch(actionCreators.PopoverShow())
    },
    hidePopover(){
        dispatch(actionCreators.popoverHide())
    }
})
export default connect (mapstart,mapdispatch)(Writer)